<template >
    <div>
        <div class="search-box">
            <div class="flex">
                <div>
                    <el-icon>
                        <Search />
                    </el-icon><span>筛选搜索</span>
                </div>
                <div>
                    <el-button @click="resetForm"> 重置</el-button>
                    <el-button @click="submitFn" type="primary">查询搜索</el-button>
                </div>
            </div>
            <div style="padding-top: 20px">
                <el-form @submit.prevent="EnterFn" ref="searchFormRef" :model="listParams">
                    <el-form-item prop="keyword" label="账号/姓名:" label-width="120px">
                        <!-- <el-input v-model="listParams.keyword" @change="EnterFn"></el-input> -->
                        <el-input v-model="listParams.keyword"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="add-box">
            <el-button type="primary" @click="addUser">添加</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="编号" prop="id"> </el-table-column>
            <el-table-column label="账号" prop="username"> </el-table-column>
            <el-table-column label="姓名" prop="nickName"> </el-table-column>
            <el-table-column label="邮箱" prop="email"> </el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="登录时间">
                <template #default="scope">
                    {{ fomatDate(scope.row.loginTime) }}
                </template>
            </el-table-column>

            <el-table-column label="是否启动用">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                        @change="changeHandle(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" link @click="handleEdit(scope.row.id)">分配角色</el-button>
                    <el-button type="primary" link @click="Edithand(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
            layout="total, sizes, prev, pager, next, jumper" :total="state.total" :page-sizes="[5, 10, 50, 100]"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <EditUserVue :show="showEditUser" @hide="hideDialog" @refresh="getList" :data="editId" @setEditId="setId" />
    <EditRole :show="showAllocRole" @hide="hideAllocRole" :data="allocRoleId" />
</template>
  
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue';
import { fomatDate } from "@/utils"
import { Search } from "@element-plus/icons-vue"
import { user } from "@/api"
import { ElMessage, FormInstance } from 'element-plus';
import EditUserVue from "./components/EditUser.vue";
import EditRole from './components/EditRole.vue';
interface IState {
    tableData: IUserList[],
    listParams: {
        keyword: string,
        pageNum: number,
        pageSize: number,
    },
    total: number

}

// 存放数据
const editId = ref(0);
const state = reactive<IState>({
    tableData: [],
    listParams: {
        keyword: "",
        pageNum: 1,
        pageSize: 10
    },
    total: 0,

})
// 封装列表的请求
const getList = () => {
    user.getUserList(state.listParams).then(res => {
        if (res.code === 200) {
            // console.log(res.data);
            state.tableData = res.data.list
            state.total = res.data.total
        }
    }
    )
}
const searchFormRef = ref<FormInstance>();
const resetForm = () => {
    // console.log(searchFormRef.value);

    searchFormRef.value?.resetFields();
}

const hideDialog = () => {
    showEditUser.value = false;
};

getList()


// 搜索按钮
const submitFn = () => {
    // console.log(val);
    state.listParams.pageNum = 1;
    getList()
}
// 按回车搜索
const EnterFn = () => {
    getList()
}

// 当然页面的条数改变时触发
const handleSizeChange = (val: number) => {
    // 筛选的条数

    // if (listParams.value.pageSize) {
    //     ElMessage.warning()
    // }
    getList()
    if (listParams.value.pageNum === Math.floor(state.total / listParams.value.pageSize)) {
        ElMessage.info("数据已经全部输入出了")
    }



}
const handleCurrentChange = () => {
    getList()
}

interface User {
    date: string
    name: string
    address: string
}
const showAllocRole = ref(false);
// 分配角色的显示和隐藏
const handleEdit = (id: number) => {
    // console.log(index, row)
    showAllocRole.value = true;
    allocRoleId.value = id
}
const hideAllocRole = () => {
    showAllocRole.value = false;
    allocRoleId.value = 0;
};
// 分配角色的id
const allocRoleId = ref(0);


const Edithand = (id: number) => {
    showEditUser.value = true

    editId.value = id
}

let { tableData, listParams } = toRefs(state)

const changeHandle = (row: IUserList) => {
    user.updateUserStatusApi({ id: row.id, status: row.status }).then(res =>
        ElMessage({
            message: res.message,
            type: res.code === 200 ? "success" : "error"
        })

    ).catch(err => {
        console.log(err);

        row.status = row.status === 1 ? 0 : 1;
        // let target = state.tableData.find((item) => item.id === row.id);
        // target && (target.status = row.status === 1 ? 0 : 1);
    })
}
const showEditUser = ref(false);

const addUser = () => {
    // 控制 EditUser 显示
    showEditUser.value = true;
    setId()
};
const setId = () => {
    editId.value = 0
}
// 分配角色部分



</script>

<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }


}

.el-form-item {
    width: 300px;
}

.el-pagination {

    display: flex;
    justify-content: right;
}

.add-box {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #ccc;
}
</style>